<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle"
               @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams2"
      :isSelectColumn="false"
      datakey="records"
      :onRowSelectChange="selectChange"
      :onColumnsChange="columns => this.columns = columns"
    >
      <template slot="controls" slot-scope="props">
        <!--        <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandle">新增</el-button>-->
      </template>
    </FilterTable>
  </div>
</template>

<script>
import {getPjckmxbb} from '@/api/reportManage/salesAfter';
import {dictionary} from '@/utils/dictMixin';

export default {
  name: "jsmxyb",
  components: {},
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchApi: getPjckmxbb,
      fetchParams: {xhrAbort: true},
      visibleDrawer: false,
      formData: {},
      rowSelectData: [],
    };
  },
  computed: {
    fetchParams2() {
      return {
        pageType: this.pageType,
        ...this.fetchParams
      }
    }
  },

  methods: {
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '日期',
          fieldName: 'createdAt1|createdAt2',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '请选择'
        },
      ]
    },
    createTableColumns() {
      const cParam = {
        summationUnit: '元',
        numberFormat: true,
        summation: true,
        precision: 2
      };
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '服务站简称',
          dataIndex: 'fwzjc',
          sorter: true,
          filter: true,
          filterType: 'input',
          ...cParam,
        },
        {
          title: '售前索赔',
          dataIndex: 'sqsp',
          align: 'center',
          children: [
            {
              title: '售前索赔工时费',
              dataIndex: 'sqspgsf',
              ...cParam,
            },
            {
              title: '售前索赔材料费',
              dataIndex: 'sqspclf',
              ...cParam,
            },
            {
              title: '售前索赔管理费',
              dataIndex: 'sqspglf',
              ...cParam,
            },
            {
              title: '售前索赔运费',
              dataIndex: 'sqspyf',
              ...cParam,
            },
            {
              title: '售前索赔外出费',
              dataIndex: 'sqspwcf',
              ...cParam,
            },
            {
              title: '售前索赔其他费用',
              dataIndex: 'sqspqtfy',
              ...cParam,
            },
            {
              title: '合计',
              dataIndex: 'sqsphj',
              ...cParam,
            },
          ]
        },
        {
          title: '正常保修',
          dataIndex: 'zcbx',
          align: 'center',
          children: [
            {
              title: '正常保修工时费',
              dataIndex: 'zcbxgsf',
              ...cParam,
            },
            {
              title: '正常保修材料费',
              dataIndex: 'zcbxclf',
              ...cParam,
            },
            {
              title: '正常保修管理费',
              dataIndex: 'zcbxglf',
              ...cParam,
            },
            {
              title: '正常保修运费',
              dataIndex: 'zcbxyf',
              ...cParam,
            },
            {
              title: '正常保修外出费',
              dataIndex: 'zcbxwcf',
              ...cParam,
            },
            {
              title: '正常保修其他费用',
              dataIndex: 'zcbxqtfy',
              ...cParam,
            },
            {
              title: '合计',
              dataIndex: 'zcbxhj',
              ...cParam,
            },
          ]
        },
        {
          title: '技术升级',
          dataIndex: 'jssj',
          align: 'center',
          children: [
            {
              title: '技术升级工时费',
              dataIndex: 'jssjgsf',
              ...cParam,
            },
            {
              title: '技术升级材料费',
              dataIndex: 'jssjclf',
              ...cParam,
            },
            {
              title: '技术升级管理费',
              dataIndex: 'jssjglf',
              ...cParam,
            },
            {
              title: '技术升级运费',
              dataIndex: 'jssjyf',
              ...cParam,
            },
            {
              title: '技术升级外出费',
              dataIndex: 'jssjwcf',
              ...cParam,
            },
            {
              title: '技术升级其他费用',
              dataIndex: 'jssjqtfy',
              ...cParam,
            },
            {
              title: '合计',
              dataIndex: 'jssjhj',
              ...cParam,
            },
          ]
        },
        {
          title: '保养费用',
          dataIndex: 'byfy',
          ...cParam,
        },
        {
          title: '服务活动',
          dataIndex: 'fwhd',
          ...cParam,
        },
        {
          title: '考核奖励',
          dataIndex: 'khjl',
          ...cParam,
        },
        {
          title: '让渡服务',
          dataIndex: 'rdfw',
          ...cParam,
        },
        {
          title: '总计',
          dataIndex: 'zj',
          ...cParam,
        },
      ]
    },
    addHandle() {
      this.visibleDrawer = true
    },
    detailHandle(row, handleType) {
      this.formData = {
        id: row.id,
        data: {
          ...row,
          details: []
        }
      };
      this.visibleDrawer = true
    },
    closeHandler(type) {
      this.visibleDrawer = false
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = Object.assign({}, this.fetchParams);
      }
    },
    selectChange(val) {
      this.rowSelectData = val;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
  }
}
</script>

<style scoped>

</style>
